<template>
  <div class="pt-4 rounded-xl">



    <div>
        <customCell
        v-model:value="salesMateCustomerName"
        placeholder="请输入并选择客户名称"
        isLink
        required
        :autocomplete="true"
        :querySearchName="querySearchCustomerName"
        iconsUrl="https://meetcdn.yxt.com/test-flutter-web/img/customer.svg"
      />

      <customCell
        v-model:value="salesMateTags"
        placeholder="选择沟通环节"
        isLink
        required
        :readOnly="true"
        iconsUrl="https://meetcdn.yxt.com/test-flutter-web/img/tag.svg"
        @click="showTagActionSheet = true"
      />
      <customCell
        v-model:value="salesGoal"
        type="textarea"
        required
        placeholder="输入沟通目标，请详细描述本次沟通想要达到的目的"
        :maxlength="200"
        iconsUrl="https://meetcdn.yxt.com/test-flutter-web/img/target.svg"
      />
    </div>

    <div class="mt-6 mb-8 mx-4">
      <van-button type="primary" block :loading="loading" @click="onConfirm">确认</van-button>
    </div>

    <van-action-sheet
      v-model:show="showTagActionSheet"
      :actions="actions"
      cancel-text="取消"
      @select="onSelectTag"
    />
  </div>
</template>

<script setup>
import customCell from "@/views/orderVisit/components/customCell.vue";
import { searchCompanyAPI } from "@/services/orderVisit";
import { ref, computed, onMounted, defineProps, defineEmits } from "vue";
import { useOrderVisitStore } from "@/store";
import { bindCustomersAPI } from "@/services/myXmate";

const store = useOrderVisitStore();

const salesMateCustomerName = ref("");
const salesMateTags = ref("");
const salesGoal = ref("");


const props = defineProps({
  conferenceId: {
    type: String,
    default: "",
  }
})

const emits = defineEmits(['onConfirm'])

const showTagActionSheet = ref(false);

const customerTopics = computed(() => store.salesConfig.customerTopics || []);
const actions = computed(() =>
  customerTopics.value.map((v) => {
    return { name: v.label };
  })
);

function onSelectTag(v) {
  salesMateTags.value = v.name;
  showTagActionSheet.value = false;
}

onMounted(() => {
  store.getSalesConfigAction();
})

// 搜索客户名称
async function querySearchCustomerName(query, cb) {
  if (query.length === 0) {
    cb([]);
    return;
  }
  const data = (await searchCompanyAPI(query)) || [];
  let result = [];
  result = data.map((v) => {
    return {
      value: v.name,
    };
  });
  cb(result);
}

const loading = ref(false);
async function onConfirm()  {
  let params = {
    conferenceIds: [props.conferenceId || ""],
    salesMateCustomerName: salesMateCustomerName.value,
    salesRelatedType: 1,
    salesMateTags: salesMateTags.value,
    salesGoodsCategories: "",
    salesMateType: '2',
    salesGoal: salesGoal.value,
  }
  loading.value = true
  const res = await bindCustomersAPI(params)
  loading.value = false
  emits('onConfirm')
  
  console.log('onConfirm: ', res)
  
}

</script>

<style lang="less" scoped></style>
